<template>
	<view class="viewport mine">
		<view class="header">
			<view class="header__title" :style="headerTitleStyle">
				<view class="header__title__inner">个人中心</view>
			</view>

			<view v-if="!authStore.isLogin" class="iflex aic jcc fill" style="padding-top: 80rpx;">
				<u-button type="primary" @click="tapLogin">未登录，请先登录...</u-button>
			</view>

			<view v-else class="header__info" @click="tapToPersonalProfile">
				<view class="header__info__left">
					<view class="nickname">{{detail.nickname}}</view>
					<view class="phone-number">{{detail.phoneNumber}}</view>
				</view>
				<view class="header__info__portrait">
					<image :src="detail.avatar"></image>
				</view>
			</view>


			<view class="header__my-order">
				<view class="header__my-order__header">
					<text class="header-title">我的订单</text>
					<view class="header-all" @click.stop="tapOrderFunc(orderFuncList[3])">
						查看全部
					</view>
				</view>

				<view class="header__my-order__func">
					<view v-for="item of orderFuncList" :key="item.status" class="func-item"
						@click.stop="tapOrderFunc(item)">
						<image class="func-item__icon" :src="item.icon"></image>
						<view class="func-item__text">{{item.text}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex column scroll">
			<view class="func">
				<view v-for="item of funcList" :key="item.url" class="func__item" @click.stop="tapFunc(item)">
					<view :class="['func__item__icon',item.icon]"></view>
					<view class="func__item__text">{{item.text}}</view>
				</view>
			</view>

			<view class="iflex column fill footer">
				<view class="iflex fill aic jcc slogan">
					<image class="inline-flex logo" src="/static/image/mine/logo.png"></image>
					法律咨询更省心，点评律师更放心
				</view>
				<view class="iflex fill jcc aic company-info">
					电话：{{support.tel}}<text>|</text>地址：上海市叉叉区陆家嘴摩天大厦69-01
				</view>
				<view class="iflex fill jcc copyright">
					上海咕法网法律咨询有限公司
				</view>
			</view>
		</view>
	</view>
	<LoginPopup @success="loadData"></LoginPopup>
</template>

<script setup lang="ts">
	import type { BoundingRect } from '@/hooks/bounding-rect';
	import { inject, computed, ref, onBeforeMount, getCurrentInstance } from 'vue';
	import { setTabbar } from '@/utils/wx';
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import type { AnyObj } from '@/types/global';
	import { getAccountInfo } from '@/apis/auth';
	import { useAuthStore } from '@/stores';
	import { isLogin } from '@/utils/auth';
	import { getSupport } from '@/apis/common';

	setTabbar({ selected: 4 });
	const boundingRect = inject<BoundingRect>('boundingRect') as BoundingRect;

	const authStore = useAuthStore();

	const detail = ref<AnyObj>({

	});

	const headerTitleStyle = computed(() => {
		return { height: boundingRect.navbarStyle.height, paddingTop: boundingRect.navbarStyle.paddingTop }
	});

	function tapToPersonalProfile() {
		uni.navigateTo({
			url: "/pages-mine/personal-profile/personal-profile"
		})
	}

	const orderFuncList = ref([
		{ icon: '/static/image/mine/wallet.png', text: '已付款', status: 'wallet' },
		{ icon: '/static/image/mine/finish.png', text: '已完成', status: 'finish' },
		{ icon: '/static/image/mine/appraise.png', text: '评价', status: 'appraise' },
		{ icon: '/static/image/mine/all.png', text: '全部', status: 'all' }
	]);

	function tapOrderFunc(item : { status : string; }) {
		uni.navigateTo({
			url: `/pages-mine/my-order/my-order?status=${item.status}`
		})
	}

	const funcList = ref([
		{ icon: 'f-icon1', text: '关注', url: '/pages-mine/follow/follow' },
		{ icon: 'f-icon2', text: '反馈与意见', url: '/pages-mine/feedback/feedback' },
		{ icon: 'f-icon3', text: '客服中心', url: '/pages-mine/service-center/service-center' },
		{ icon: 'f-icon4', text: '设置', url: '/pages-mine/settings/settings' }
	]);

	function tapFunc(item : { url : string; }) {
		uni.navigateTo({
			url: item.url,
		})
	}

	function tapLogin() {
		authStore.show()
	}

	const support = ref({
		tel: ''
	})

	function loadData() {
		getSupport().then((res) => {
			support.value = res.data ?? {};
		});

		if (!isLogin()) return;
		getAccountInfo().then((res) => {
			detail.value = res.data ?? {};
		});
	}

	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});
	onShow(() => {
		loadData();
	});
</script>
<style lang="scss">
	.mine {
		height: 100vh;
		padding-bottom: 116rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;

		.header {
			position: relative;
			display: inline-flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 750rpx;
			height: 680rpx;
			background-image: url("");
			background-size: 750rpx 544rpx;
			background-repeat: no-repeat;
			box-sizing: border-box;

			&__title {
				display: inline-flex;
				flex-shrink: 0;
				width: 100%;
				box-sizing: border-box;

				&__inner {
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;
					flex-shrink: 0;
					background-color: #FFF;
					background: rgba(240, 231, 231, 0);
					color: #F0E7E7;
					font-size: 40rpx;
					font-weight: 600;
				}
			}

			&__info {
				display: inline-flex;
				width: 100%;
				height: 124rpx;
				margin-top: 60rpx;
				justify-content: space-between;
				box-sizing: border-box;
				color: white;

				&__left {
					display: inline-flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					padding: 12rpx 0 12rpx 44rpx;
					box-sizing: border-box;

					.nickname {
						display: inline-flex;
						width: 100%;
						font-size: 40rpx;
						font-weight: 500;
					}

					.phone-number {
						display: inline-flex;
						width: 300rpx;
						font-size: 28rpx;
						font-weight: 400;
						overflow: hidden;
					}
				}

				&__portrait {
					display: inline-flex;
					flex-shrink: 0;
					justify-content: center;
					align-items: center;
					width: 124rpx;
					height: 124rpx;
					margin-right: 34rpx;
					border-radius: 50%;
					box-sizing: border-box;
					background-color: white;
					border: 2rpx solid #F6F6F6;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

			}

			&__my-order {
				position: absolute;
				left: 30rpx;
				bottom: 0;
				width: 690rpx;
				height: 260rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				&__header {
					display: inline-flex;
					flex-shrink: 0;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding: 28rpx 26rpx 20rpx 32rpx;
					box-sizing: border-box;

					.header-title {
						font-weight: 500;
						font-size: 36rpx;
						color: #101010;
						font-weight: 500;
						font-size: 36rpx;
						color: #101010;
						line-height: 42rpx;
					}

					.header-all {
						display: inline-flex;
						flex-shrink: 0;
						height: 34rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #B2B2B2;
						line-height: 34rpx;
						padding-right: 16rpx;
						box-sizing: border-box;
						background-image: url("");
						background-repeat: no-repeat;
						background-position: right center;
						background-size: 16rpx 16rpx;
					}
				}

				&__func {
					display: inline-flex;
					justify-content: space-between;
					width: 100%;
					padding: 0 50rpx;
					box-sizing: border-box;

					.func-item {
						display: inline-flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						flex-shrink: 0;
						width: 80rpx;
						height: 126rpx;


						&__icon {
							width: 81rpx;
							height: 81rpx;
						}

						&__text {
							font-weight: 400;
							font-size: 26rpx;
							color: #101010;
						}
					}
				}
			}
		}

		.scroll {
			overflow-y: auto;
		}

		.func {
			position: relative;
			display: inline-flex;
			flex-shrink: 0;
			flex-direction: column;
			width: 690rpx;
			padding: 28rpx 0;
			margin-top: 20rpx;
			margin-left: 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 8rpx;


			&__item {
				position: relative;
				display: inline-flex;
				align-items: center;
				width: 100%;
				height: 104rpx;
				flex-shrink: 0;
				padding: 0 18rpx 0 30rpx;
				box-sizing: border-box;
				background: #FFF;
				color: #101010;
				font-size: 30rpx;
				font-weight: 400;

				&::after {
					position: absolute;
					top: 50%;
					right: 18rpx;
					transform: translateY(-50%);
					content: '';
					display: inline-block;
					width: 29rpx;
					height: 29rpx;
					background-image: url('');
					background-size: cover;
				}


				&__icon {
					display: inline-flex;
					flex-shrink: 0;
					width: 41rpx;
					height: 41rpx;
					margin-right: 30rpx;
					background-size: cover;

					&.f-icon1 {
						background-image: url('');
					}

					&.f-icon2 {
						background-image: url('');
					}

					&.f-icon3 {
						background-image: url('');
					}

					&.f-icon4 {
						background-image: url('');
					}
				}
			}
		}

		.footer {
			.slogan {
				padding: 105rpx 0 13rpx 0;
				color: #ff710a;
				font-size: 28rpx;
				font-weight: 500;

				.logo {
					width: 36.4rpx;
					height: 49rpx;
					margin-right: 10rpx;
				}
			}

			.company-info {
				color: #818181;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 48rpx;

				text {
					padding: 0 15rpx;
				}
			}

			.copyright {
				color: #818181;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 48rpx;
			}
		}
	}
</style>